<template>
  <a-drawer :open="visible" :title="title" :width="600" @close="handleClose" :destroyOnClose="true">
    <a-form :model="form" :rules="rules" ref="formRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" layout="horizontal">
      <a-form-item label="标题" name="title" required>
        <a-input v-model:value="form.title" :disabled="isDetail" placeholder="请输入" :rows="4" />
      </a-form-item>
      <a-form-item label="正文" name="content" required>
        <a-textarea v-model:value="form.content" :disabled="isDetail" placeholder="请输入" :rows="4" />
      </a-form-item>
      <a-form-item label="序号" name="seq">
        <a-input v-model:value="form.seq" type="number" :disabled="isDetail" placeholder="请输入" :rows="4" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-select v-model:value="form.status" :disabled="isDetail" placeholder="请选择" :options="statusOptions" />
      </a-form-item>
      <a-form-item label="上图" name="topFileList">
        <SimpleImageUpload
          v-model="form.topFileList"
          ref="characteristicsFileListRef"
          :maxCount="20"
          :disabled="isDetail"
          :upload-params="{ type: 'honor_top' }"
        />
      </a-form-item>
      <a-form-item label="中图" name="middleFileList">
        <SimpleImageUpload
          v-model="form.middleFileList"
          :disabled="isDetail"
          ref="caseFileListRef"
          :maxCount="20"
          :upload-params="{ type: 'honor_middle' }"
        />
      </a-form-item>
      <a-form-item label="下图" name="bottomFileList">
        <SimpleImageUpload
          v-model="form.bottomFileList"
          :disabled="isDetail"
          ref="bottomFileListRef"
          :maxCount="20"
          :upload-params="{ type: 'honor_bottom' }"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4 }">
        <a-button style="margin-right: 16px" type="primary" @click="handleSubmit" :loading="loading" v-if="!isDetail">保存</a-button>
        <a-button @click="handleClose">取消</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
  <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, defineEmits, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { saveOrUpdate, getHonorById } from './api';
  import { statusOptions } from './data';
  import SimpleImageUpload from '/@/components/SimpleImageUpload.vue';
  const previewVisible = ref(false);
  const previewImage = ref('');
  const previewTitle = ref('');

  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
    visible: { type: Boolean, default: false },
    isDetail: { type: Boolean, default: false },
  });
  const title = ref('新增');
  const isUpdate = ref(false);
  const loading = ref(false);
  const characteristicsFileListRef = ref();
  const caseFileListRef = ref();
  const bottomFileListRef = ref();
  onMounted(async () => {
    if (props.id) {
      isUpdate.value = true;
      title.value = props.isDetail ? '详情' : '编辑';
      const data = await getHonorById({ id: props.id });
      form.value = data;
      characteristicsFileListRef.value.setFileList(data.topFileList);
      caseFileListRef.value.setFileList(data.middleFileList);
      bottomFileListRef.value.setFileList(data.bottomFileList);
    }
  });
  const handleCancel = () => {
    previewVisible.value = false;
    previewTitle.value = '';
  };
  const emit = defineEmits(['update:visible', 'success']);

  const formRef = ref();

  const form = ref({
    title: '',
    type: '',
    content: '',
    topFileList: [],
    middleFileList: [],
    bottomFileList: [],
    status: '1',
    seq: '',
  });

  const rules = {
    title: [{ required: true, message: '请输入' }],
    content: [{ required: true, message: '请输入' }],
  };

  function handleSubmit() {
    loading.value = true;
    formRef.value
      .validate()
      .then(async () => {
        await saveOrUpdate(form.value, isUpdate.value);
        message.success('新增成功');
        emit('success');
        emit('update:visible', false);
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleClose() {
    emit('update:visible', false);
  }
</script>

<style scoped>
  .upload-tip {
    color: #888;
    font-size: 12px;
    margin-top: 4px;
  }
</style>
